<template>
  <div class="app">
    <h3>饿了么</h3>
    <div class="text">
        <div>
            <div class="box"></div>
            <div class="title">
                <p>7a9aa5a077a</p>
                <span>194*****2345</span>
            </div>
        </div>
        <div class="set">账户设置</div>
    </div>

    <div class="banner">
    <img
      src="https://img0.baidu.com/it/u=3963321963,3651668528&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=192"
      alt=""
    />
  </div>
  <div class="hong">
    <div class="bao">
        红包
    </div>
    <div class="yv">
       余额
    </div>
  </div>
  <div class="tools">
    <Mine_tools></Mine_tools>    
  </div>
  </div>
</template>

<script>
import Mine_tools from '../../components/Mine_tools.vue';

export default {
    components: { Mine_tools }
}
</script>

<style lang="scss" scoped>
.app{
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
}

.app h3 {
    margin: 10px 0;
}

.app .text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app .text .box {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: lightblue;
}

.app .text>div{
    display: flex;
}

.app .text>div .title {
    margin-left: 10px;
}

.app .text>div .title p {
    font-weight: bold;
}

.banner {
  margin: 10px;
}
.banner img {
  width: 100%;
  border-radius: 5px;
}
.hong {
    background-color: white;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hong .bao {
    margin-left: 30px;
}

.hong .yv {
    margin-right: 30px;
}

.tools {
    background-color: white;
    margin: 10px 0;
    height: 100px;
    box-sizing: border-box;
}

.tools .biao {
    padding: 10px 10px;
    font-weight: bold;
}

.tools .dizhi span{
    display: inline-block;
    padding: 20px 10px;
}

</style>